<template>
  <div class="left-block1">
    <div class="data-title text-ellipsis">
      <a href="javascript:;" @click="download">{{ obj.name }}</a>
    </div>
    <div class="project-base">
      <!-- <p class="txt">
        <span class="t1">
         项目编号：<i class="ino">{{ obj.welderNumber }}</i>
        </span>
      </p> -->
      <ul class="pro-plan clearfix">
        <li class="f1" style="width: 50px">开始<br>时间</li>
        <li class="f2" style="width: 90px">
          <p class="date" style="font-size: 16px;line-height: 28px;margin-bottom: 0px">{{ obj.startTime|dateFormat('YYYY-MM-DD') }}</p>
          <p class="date" style="font-size: 16px;line-height: 26px;">{{ obj.startTime|dateFormat('HH:mm') }}</p>
        </li>
        <li class="line" />
        <li class="f1" style="width: 50px;margin-left: 10px">结束<br>时间</li>
        <li class="f2" style="width: 90px">
          <p class="date" style="font-size: 16px;line-height: 28px;margin-bottom: 0px">{{ obj.endTime|dateFormat('YYYY-MM-DD') }}</p>
          <p class="date" style="font-size: 16px;line-height: 26px;">{{ obj.endTime|dateFormat('HH:mm') }}</p>
        </li>
        <!--        <li class="f3">-->
        <!--          <p class="date">{{ obj.endTime|dateFormat('YYYY-MM-DD') }}</p>-->
        <!--          <p class="date">{{ obj.endTime|dateFormat('HH:mm') }}</p>-->
        <!--        </li>-->
        <li class="f4">
          <div style="width: 86px;height: 86px">
            <p-echarts :option="option" />
          </div>
        </li>
      </ul>
      <ul class="pro-bs">
        <li class="f1">项目<br>经理</li>
        <li class="f2">
          <div class="media">
            <div class="media-left">
              <el-avatar :src="obj.picture|imgPath" icon="el-icon-user-solid" :size="42" />
            </div>
            <div class="media-body">
              <p class="name">{{ obj.userName }}</p>
              <p class="tel">{{ obj.phone }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import PEcharts from '@/components/charts/pEcharts'
import { downloadHandle } from '@/api'
export default {
  name: 'ProjectInfo',
  components: { PEcharts },
  props: {
    obj: {
      type: Object,
      required: true
    }
  },
  computed: {
    option() {
      return {
        title: {
          text: this.obj.timeLeft,
          textStyle: {
            color: '#50E3C2',
            fontSize: 16
          },
          subtext: '剩余/天',
          subtextStyle: {
            color: '#cbcbcb',
            fontSize: 12
          },
          itemGap: 0, // 主副标题距离
          left: 'center',
          top: 'center'
        },
        angleAxis: {
          max: this.obj.totalTime, // 满分
          clockwise: false, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '180%' // 图形大小
        },
        series: [{
          type: 'bar',
          data: [{
            name: '已进行',
            value: this.obj.totalTime - this.obj.timeLeft,
            itemStyle: {
              normal: {
                color: '#50E3C2'
              }
            }
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 5,
          barGap: '-100%', // 两环重叠
          z: 2
        }, { // 灰色环
          type: 'bar',
          data: [{
            value: this.obj.totalTime,
            itemStyle: {
              color: ' #4A4A4A',
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 5,
              shadowOffsetY: 2
            }
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 5,
          barGap: '-100%', // 两环重叠
          z: 1
        }]
      }
    }
  },
  methods: {
    download() {
      downloadHandle('pdf/20190805.pdf').then(res => {
        let fileName = '1_XQGDQX70-WPS西气东输X70维抢修B型套筒焊接工艺规程.pdf'
        let blob = new Blob([res.data], { type: res.data.type })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = fileName // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放blob对象
      })
    }
  }
}
</script>
